<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气查询</title>
	</head>
	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo"><img src="" alt="logo"/></div>
				<div class="form_group">
					<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
					<button class="input_sub">搜索</button>
				</div>
				<div class="hotkey">
					<a href="javascript:;" @click="changeCity('北京')">北京</a>
					<a href="javascript:;" @click="changeCity('上海')">上海</a>
					<a href="javascript:;" @click="changeCity('广州')">广州</a>
					<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
				</div>
			</div>
			<ul class="weather_list">
				<li v-for="item in weatherList">
					<div class="info_type"><span class="iconfont">{{item.type}}</span></div>
					<div class="info_temp">
						<b>{{item.low}}</b>~<b>{{item.high}}</b>
					</div>
					<div class="info_date"><span>{{item.date}}</span></div>
				</li>
			</ul>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="./js/main.js"></script>
	</body>
</html>